<template>
  <el-col :span="24" class="All">
    <el-col :xl="3" :lg="3" class="spanInfo" style="display: none">
      <div class="searchIP">
        <el-input
          v-model="searchIP"
          placeholder="搜索IP/搜索系统名"
          clearable
        ></el-input>
      </div>
      <div class="textLable">
        <template v-for="item in columnsFn">
          <!-- <el-button
            class="IpButton"
            :class="{ selected: item.selected }"
            type="danger"
            @click="handSearchIp(item)"
            v-if="item.MAX_ALERTLEVEL==3"
            plain
            size="medium"
            :key="item.MONID"
          >
            
              
              {{ item.IP }}
          </el-button>
          <el-button
            class="IpButton"
            :class="{ selected: item.selected }"
            type="warning"
            @click="handSearchIp(item)"
            v-else-if="item.MAX_ALERTLEVEL==2"
            plain
            size="medium"
            :key="item.MONID"
          >
            
              
              {{ item.IP }}
          </el-button> -->

          <!-- item.MAX_ALERTLEVEL|State+','+item.IP|itemIp -->
          <el-tooltip
            style="margin: 0.5px 0"
            v-if="item.MAX_ALERTLEVEL == 3"
            placement="right"
            effect="light"
            :key="item.MONID"
          >
            <div slot="content">
              {{ item.MAX_ALERTLEVEL | State }}<br />{{ item.IP | itemIp }}
            </div>
            <el-button
              class="IpButton"
              :class="{ selected: item.selected }"
              type="danger"
              @click="handSearchIp(item)"
              size="medium"
            >
              {{ item.SYSTEMNAME }}
            </el-button>
          </el-tooltip>
          <el-tooltip
            style="margin: 0.5px 0"
            v-else-if="item.MAX_ALERTLEVEL == 2"
            placement="right"
            effect="light"
            :key="item.MONID"
          >
            <div slot="content">
              {{ item.MAX_ALERTLEVEL | State }}<br />{{ item.IP | itemIp }}
            </div>
            <el-button
              class="IpButton"
              :class="{ selected: item.selected }"
              type="warning"
              @click="handSearchIp(item)"
              size="medium"
            >
              {{ item.SYSTEMNAME }}
            </el-button>
          </el-tooltip>
          <el-tooltip
            style="margin: 0.5px 0"
            v-else
            placement="right"
            effect="light"
            :key="item.MONID"
          >
            <div slot="content">
              {{ item.MAX_ALERTLEVEL | State }}<br />{{ item.IP | itemIp }}
            </div>
            <el-button
              class="IpButton"
              :class="{ selected: item.selected }"
              type="success"
              @click="handSearchIp(item)"
              size="medium"
            >
              {{ item.SYSTEMNAME }}
            </el-button>
          </el-tooltip>

          <!-- <i class="el-icon-circle-check"></i>
              <i class="el-icon-circle-close"></i>
              <i class="el-icon-warning"></i> -->
        </template>
      </div>
    </el-col>
    <el-col :xl="24" :lg="24" class="TableInfo">
      <div class="container">
        
        <v-tabs></v-tabs>
        <transition name="move" mode="out-in">
          <keep-alive :include="keepAliveIncludeList" :max="5">
            <router-view></router-view>
          </keep-alive>
        </transition>
      </div>
    </el-col>
  </el-col>
</template>

<script>
import vTabs from "../Tabs.vue";
import bus from "common/bus.js";
import { fetchData } from "@/api/index.js";
import { UpdateItem,GetItem,DeleteItem,AddItem } from "@/utils/dataStore"
export default {
  components: {
    vTabs,
  },
  beforeRouteEnter(to, from, next) {
    // if (from.path != "/NodeUsability") {
    //   // window.close()
    //   next("/NodeUsability");
    // }
    next();
  },
  // beforeRouteUpdate(to, from, next) {
  //   this.breadcrumbList = to.matched.map((_) => {
  //     return _.meta.title;
  //   });
  //   console.log(this.breadcrumbList);
  //   next();
  // },

  filters: {
    State: function (value) {
      switch (value) {
        case 0:
          return "状态：健康";
          break;
        case 2:
          return "状态：提醒";
          break;
        case 3:
          return "状态：紧急";
          break;

        default:
          break;
      }
    },
    itemIp: function (value) {
      return "IP:" + value;
    },
  },

  data() {
    return {
      breadcrumbList: [],
      keepAliveIncludeList: [],
      postData: {
        opera: "",
        curPage: 1,
        pageSize: 1000000,
        filtersType: "fuzzyquery",
        filters: {
          CID: "",
          StartTime: "",
          EndTime: "",
        },
      },
      tableData: [],
      allData: {},
      dataTotal: 0,
      searchJson: {},

      postSearchData: {
        opera: "dbConnect",
        curPage: 1,
        pageSize: 2000,
        sort: {
          sortColumn: "",
          sortOrders: "",
        },
        filtersType: "fuzzyquery",
        filters: { DBTYPE: "Oracle" },
      },
      columns: [],
      TextDatabace: {},
      searchIP: "",
      selectedIP: "",
      loading: true,
      selectedMONID: "",
    };
  },
  created() {
    this.getSearchData();
    // console.log(se)
  },
  computed: {
    columnsFn() {
      return this.columns.filter((d) => {
        if (
          d.IP.includes(this.searchIP) ||
          d.SYSTEMNAME.includes(this.searchIP)
        ) {
          d["selected"] = false;
          if (d.MONID == this.selectedMONID) {
            d["selected"] = true;
          }

          return d;
        }
      });
    },
  },
  methods: {
    getSearchData() {
      fetchData({
        postSearchData: JSON.stringify(this.postSearchData),
      }).then((res) => {
        // console.log(res)
        this.columns = res.data;

        // 初始化时，选中第一个节点
        if (this.columns.length > 0) {
          this.dbClickFirst();
          // this.getTableData();
        }
      });
    },
    TalallColorMethod(percentage) {
      if (percentage <= 50) {
        return "#67c23a";
      } else if (percentage <= 75) {
        return "#e6a23c";
      } else {
        return "#f56c6c";
      }
    },
    TalallColorMethod2(percentage) {
      if (percentage <= 50) {
        return "#f56c6c";
      } else if (percentage <= 75) {
        return "#e6a23c";
      } else {
        return "#67c23a";
      }
    },
    async handSearchIp(item) {
      let dexieData;
      await GetItem(sessionStorage.getItem('PushId')).then(_ => dexieData =_ )
      if (this.$route.params.ITEM) {
        // console.log()
        this.selectedMONID = this.$route.params.ITEM.MONID;
        let ITEM = this.columnsFn.filter((_) => {
          // console.log(_.MONID)
          return _.MONID == this.$route.params.ITEM.MONID;
        });
        // console.log(ITEM)
        // bus.$emit("ItemMonitorOracle", this.$route.params.ITEM);
        // this.$store.commit(
        //   "ItemMonitorOracle/setItem",
        //   this.$route.params.ITEM
        // );
        // bus.$emit("ItemMonitorALL", this.$route.params.ITEM);
        // this.$store.commit("ItemMonitorALL/setItem", this.$route.params.ITEM);
        // this.$route.params.ITEM=""
        bus.$emit("ItemMonitorOracle", ITEM[0]);
        this.$store.commit("ItemMonitorOracle/setItem", ITEM[0]);
        bus.$emit("ItemMonitorALL", ITEM[0]);
        this.$store.commit("ItemMonitorALL/setItem", ITEM[0]);
        this.$route.params.ITEM = "";
      }else if(dexieData.length > 0){
        let item = dexieData[0].articleAddress
        this.selectedMONID = item.MONID;
        bus.$emit("ItemMonitorOracle", item);
        this.$store.commit("ItemMonitorOracle/setItem", item);
        bus.$emit("ItemMonitorALL", item);
        this.$store.commit("ItemMonitorALL/setItem", item);
      } else {
        this.selectedMONID = item.MONID;
        bus.$emit("ItemMonitorOracle", item);
        this.$store.commit("ItemMonitorOracle/setItem", item);
        bus.$emit("ItemMonitorALL", item);
        this.$store.commit("ItemMonitorALL/setItem", item);
      }
    },
    dbClickFirst() {
      this.handSearchIp(this.columns[0]);
      this.getTableData();
      // console.log("已选择");
    },
    getTableData() {
      // this.loading = true;
      // fetchData({
      //     postData: JSON.stringify(this.postData)
      // }).then((res) => {
      //     this.dataTotal = res.dataTotal;
      //     // this.tableData = res.data;
      //     this.allData = res;
      //     this.loading = false;
      // });
    },
    getPaginationCurPage(val) {
      this.postData.curPage = val;

      this.getTableData();
    },
    getPaginationPageSize(val) {
      // 分页大小改变之后，重置当前页码为 1
      this.postData.curPage = 1;
      this.postData.pageSize = val;

      this.getTableData();
    },
    // 获取子组件选择的时间
    getPickerDate(pickerDate) {
      this.postData.curPage = 1;
      for (const key in pickerDate) {
        this.postData.filters[key] = pickerDate[key];
      }

      this.getTableData();
    },
    getSelectOpera(item) {
      this.postData.curPage = 1;
      this.postData.opera = item.value;
      // 删除后台可能无法识别的 filters 条件
      for (const key in this.postData.filters) {
        if (key != "CID" && key != "StartTime" && key != "EndTime") {
          delete this.postData.filters[key];
        }
      }

      this.getTableData();
    },
    getInputFilter(data) {
      this.postData.curPage = 1;
      for (const key in data) {
        if (data.hasOwnProperty(key)) {
          const element = data[key];
          this.postData.filters[key] = element;
        }
      }

      this.getTableData();
    },
    chooseColor(maxAlertLevel) {
      let _class = "";

      switch (maxAlertLevel) {
        case 3:
          _class = "iconColor3";
          break;
        case 2:
          _class = "iconColor2";
          break;

        default:
          _class = "iconColor1";
          break;
      }

      return _class;
    },
  },
  watch: {
    //     loading: {
    // 　　　　handler(newValue, oldValue) {
    //             console.log("------发--------");
    //             console.log(newValue, oldValue);
    // 　　　　}
    // 　　}
  },
  beforeDestroy(){
    DeleteItem(Number(sessionStorage.getItem('PushId'))).then(_=> {
    }).catch(e => {
      console.log(e)
    })
    sessionStorage.clear('PushId')
    window.close()
  }
};
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
.spanInfo {
  padding-right: 10px !important;
}
.searchIP {
  padding-bottom: 10px;
}
.textLable >>> .el-button + .el-button {
  margin-left: 0px !important;
}
.IpButton {
  width: 100%;
  font-size: 14px;
}
.textLable .IpButton.selected {
  color: rgb(255, 255, 255);
  background: rgb(64, 158, 255);
}

.All {
  height: 100%;
}
.spanInfo {
  height: 100%;
}
.TableInfo {
  height: calc(100% - 20%);
}
.container {
  height: 100%;
}
.TableInfo .netload {
  height: calc(100% - 10px);
}
.textLable {
  max-height: calc(80vh / var(--zoom));
  overflow-y: scroll;
}
.textLable::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.textLable::-webkit-scrollbar-thumb {
  background-color: rgba(4, 44, 119, 0.7);
  border-radius: 3px;
}
.iconColor1 {
  color: #67c23a;
  font-weight: 700;
}
.iconColor2 {
  color: #e6a23c;
  font-weight: 700;
}
.iconColor3 {
  color: #743a3a;
  font-weight: 700;
}
</style>